import 'package:flutter/material.dart';
import 'package:xws/helpers/safe_state.dart';
import 'package:xws/utils/theme_util.dart';
import 'package:xws/utils/tools_util.dart';
import 'package:xws/widgets/app_img.dart';

/// 引导页项
class GuideItem extends StatefulWidget {
  const GuideItem({
    Key? key,
    required this.text,
    required this.image,
  }) : super(key: key);

  @override
  _GuideItemState createState() => _GuideItemState();

  final String text;
  final String image;
}

class _GuideItemState extends State<GuideItem> with SafeState<GuideItem> {
  bool _show = false;

  @override
  void initState() {
    super.initState();
    _init();
  }

  Future<void> _init() async {
    await delayed(const Duration(milliseconds: 300));
    safeSetState(() => _show = true);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        AnimatedOpacity(
          opacity: _show ? 0.7 : 0,
          duration: const Duration(milliseconds: 500),
          curve: Curves.ease,
          child: Text(
            widget.text,
            style: TextStyle(
              fontSize: 40,
              fontWeight: FontWeight.bold,
              color: black(context),
            ),
          ),
        ),
        AnimatedPadding(
          padding: EdgeInsets.only(top: _show ? 50 : 200),
          duration: const Duration(milliseconds: 500),
          curve: Curves.ease,
          child: AnimatedOpacity(
            opacity: _show ? 1 : 0,
            duration: const Duration(milliseconds: 500),
            curve: Curves.ease,
            child: AppImg(
              url: widget.image,
              width: sw * 0.95,
            ),
          ),
        ),
      ],
    );
  }
}
